<template>
  <div ref="chart" style="width:100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { mapGetters } from 'vuex';
export default {
  name: 'BarChart',
  computed: {
    ...mapGetters(['sidebar']) // 获取侧边栏状态
  },
  props: {
    // 可接收外部数据（可选）
    chartData: {
      type: Object,
      default: () => ({
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [120, 200, 150, 80, 70, 110, 130],
      }),
    },
  },
  watch: {
    'sidebar.opened': {
      immediate: true, // 立即执行一次
      handler(newVal) {
        this.$nextTick(() => {
           window.addEventListener('resize', () => this.myChart.resize());
        });
      }
    },
    // 深度监听数据变化
    chartData: {
      deep: true,
      handler(newData) {
        this.initChart(newData);
      }
    }
  },
  mounted() {
    this.initChart();
  },
  data() {
    return {
      myChart: null
    };
  },
  methods: {
    cleanup() {
      // 移除ResizeObserver
      if (this.resizeObserver) {
        this.resizeObserver.disconnect();
      }
      // 移除window.resize监听
      if (this.resizeHandler) {
        window.removeEventListener('resize', this.resizeHandler);
      }
      // 销毁图表实例
      if (this.myChart) {
        this.myChart.dispose();
      }
    },
    initChart() {
      // 1. 初始化图表
      const chartDom = this.$refs.chart;
      this.myChart = echarts.init(chartDom);

      // 2. 配置图表选项
      const option = {
        tooltip: {},
        xAxis: {
          type: 'category',
          data: this.chartData.xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '人数',
          nameTextStyle: {
            color: '#303030',
            fontSize: '12px',
            padding: [0, 35, 10, 0]
          },
          data: this.chartData.seriesData,
          axisLabel: {
            color: '#666', // X轴标签颜色
          },
          axisLine: {
            lineStyle: {
              color: '#ccc', // X轴线颜色
            },
          },
          splitLine: {
            show: true, // 确保显示网格线
            lineStyle: {
              color: '#eee', // 网格线颜色（浅灰色）
              width: 1, // 网格线宽度
              type: 'dashed', // 实线
            },
          },
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: this.chartData.seriesData,
            itemStyle: {
              // 定义渐变色（上下渐变）
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2878FF ' }, // 顶部颜色
                { offset: 1, color: '#FFFFFF ' } // 底部颜色（可以与中间相同或不同）
              ]),
              // 可选：添加圆角
              borderRadius: [80, 80, 0, 0], // 左上、右上、右下、左下
            },
            // 可选：柱子宽度
            barWidth: '40px',
            label: {
              show: true,
              position: 'top',
              color: '#303030',
              boxShadow: '0px 0px 6px rgba(0,0,0,0.16)',
              fontSize: '12px',
              formatter: '{c}', // 显示数值
            },
          },
        ]
      };

      // 3. 渲染图表
      this.myChart.setOption(option);

      // 4. 响应式调整（可选）
      window.addEventListener('resize', () => this.myChart.resize());
    },
  },
  beforeDestroy() {
    this.cleanup();
  }
};
</script>
